<template>
  <div id="indexsives" :style="{ width, height }"></div>
</template>

<script>
import { requestAlarmRecord } from '@/api/collection/board'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indexsives',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    //设置定时器
    this.timer = setInterval(() => {
      this.initChart()
    }, 5000)
  },

  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initChart() {
      const echarts = this.$echarts
      if (this.chart === null) {
        this.chart = echarts.init(document.getElementById('indexsives'))
      }
      requestAlarmRecord().then((response) => {
        let num = response[0] + response[1] + response[2] + response[3]
        var m2R2Data = [
          {
            value: response[0],
            legendname: '一级报警 ' + (response[0] / num * 100).toFixed('2') + '%',
            name: '一级报警   ' + response[0] + '次',
            itemStyle: { color: 'red' }
          },
          {
            value: response[1],
            legendname: '二级报警 ' + (response[1] / num * 100).toFixed('2') + '%',
            name: '二级报警   ' + response[1] + '次',
            itemStyle: { color: '#ffdb5c' }
          },
          {
            value: response[2],
            legendname: '三级报警 ' + (response[2] / num * 100).toFixed('2') + '%',
            name: '三级报警   ' + response[2] + '次',
            itemStyle: { color: '#32c5e9' }
          },
          {
            value: response[3],
            legendname: '四级报警 ' + (response[3] / num * 100).toFixed('2') + '%',
            name: '四级报警   ' + response[3] + '次',
            itemStyle: { color: '#03B48E' }
          }
        ]

        var option = {
          title: [
            {
              text: '合计',
              subtext: num + '次',
              textStyle: {
                fontSize: 20,
                color: '#fff'
              },
              subtextStyle: {
                fontSize: 18,
                color: '#fff'
              },
              textAlign: 'center',
              x: '34.5%',
              y: '35%'
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function(parms) {
              var str =
                parms.marker +
                '' +
                parms.data.legendname +
                '</br>' +
                '占比：' +
                parms.percent +
                '%'
              return str
            }
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            left: '70%',
            align: 'left',
            top: 'middle',
            textStyle: {
              color: '#fff'
            },
            height: 250
          },
          series: [
            {
              name: '标题',
              type: 'pie',
              center: ['35%', '50%'],
              radius: ['50%', '65%'],
              clockwise: false, //饼图的扇区是否是顺时针排布
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outter',
                  formatter: function(parms) {
                    return parms.data.legendname
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 12,
                  length2: 20,
                  smooth: true
                }
              },
              data: m2R2Data
            }
          ]
        }

        this.chart.setOption(option)
      })

    }
  }
}
</script>
